<script setup lang="ts" name="trade">
import PickeDate from './PickeDate.vue';
import { onMounted, ref } from 'vue';
import { getRechargerecording } from '/@/apis/userApi';
import { useRequest } from 'vue-request';
import { i18nTranslate } from '/@/i18n';
import { useUserId } from '/@/hooks/index';
const { getUserId } = useUserId();
const userId = getUserId();
const onPickeDate = (data: any) => {
  params.value.startDate =  data[0];
  params.value.endDate =  data[1];
  params.value.pageNum = 1;
  dataList.value = [];
  onLoadData();
}
const dataList = ref<any[]>([]);
const params = ref({ 
  memberId: userId,
  pageNum: 1,
  pageSize: 10,
  startDate: '',
  endDate: '',
});
const finished = ref(false);
const loading = ref(false);
const getData = () => {
  loading.value = true;
  useRequest(getRechargerecording, {
    defaultParams: [params.value],
    onSuccess(result: any) {
      loading.value = false;
      if (result.records.length != params.value.pageSize) {
        finished.value = true;
      } else {
        params.value.pageNum++;
      }
      dataList.value = dataList.value.concat(result.records)
    },
    onError() {
      finished.value = true;
      dataList.value = [];
    }
  })
}
const onLoadData = () => {
  finished.value = false;
  getData();
}
onMounted(() => {
  onLoadData();
});
// @ApiModelProperty("状态 1 待审核, 2 审核通过 , 3 审核拒绝")
const status = (status: number) => {
  let obj = '';
  //审核中
  if (status === 1) {
    obj = i18nTranslate('Audit')
  }
  //成功
  if (status === 2) {
    obj = i18nTranslate('Success')
  }
  //失败
  if (status === 3) {
    obj = i18nTranslate('Fail')
  }
  return obj;
}
</script>
<template>
  <div class="recharge">
      <div>
         <PickeDate @click="onPickeDate"></PickeDate>
      </div>
      <van-list v-if="dataList.length"  v-model:loading="loading" :finished="finished" :finished-text="dataList.length ? $t('list_load_finished') : ''" :loading-text="$t('list_loading')" @load="onLoadData">
        <div class="recharge-list">
          <div class="li" v-for="item in dataList" :key="item.id">
            <div class="align-center">
              <div class="icon-box">
                <Icon name="icon-recharge2"></Icon>
              </div>
              <div class="right-box"> 
                  <div class="flex-between">
                      <p class="p1">{{ item.dataType === 2 ? $t('Manualrecharge') : item.moneyAddr ? $t('USDTrecharge') : $t('Cashrecharge') }}</p>
                      <p class="p2"> ${{ item.amount }}</p>
                  </div>
                  <div class="flex-between mt-20">
                    <p  class="recharge_status" :class="item.status === 1 ?'' : item.status === 2 ? 'font_green' : 'font_red'"> {{ status(item.status) }}</p>
                    <p class="p3">{{ $YMDHms(item.createTime) }}</p>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
      <van-empty v-else :description="$t('Nodata')" />
  </div>
</template>

<style lang="scss" scoped>
.recharge {
  margin-top: 30px;
  height: 100%;
  .recharge-list {
    margin-top: 22px;
    .li {
      background: #242424;
      border-radius: 16px;
      padding: 37px 25px 34px 22px;
      margin-bottom: 20px;
      .icon-box {
        background: rgb(246, 69, 93,0.15);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        @include center;
        margin-right: 10px;
        color: #f6455d;
      }
      .mt-20 {
        margin-top: 20px;
      }
      .right-box {
        width: 85%;
      }
      .p1 {
        font-size: 30px;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 500;
      }
      .p2 {
        font-size: 30px;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 700;
      }
      .p3 {
        color: rgb(102, 102, 102);
        font-size: 24px;
      }
      .recharge_status {
        color: #999999;
      }
      .font_red {
        color: rgb(246, 69, 93);
      }
      .font_green {
        color: rgb(45, 189, 133);
      }
    }
  }
}
</style>
